<template>
	<page-bg>
		<view class="top-head">Change password</view>
		
		<view class="form">
			<view class="input-group">
				<image src="/static/login-pwd.png"></image>
				<input type="password" v-model="password" placeholder="Password" class="input" />
			</view>
			<view class="input-group">
				<image src="/static/login-pwd.png"></image>
				<input type="password" v-model="confirmPassword" placeholder="Confirm password" class="input" />
			</view>
			<button class="login-btn">Complete and log in</button>
		</view>
	</page-bg>
</template>

<script>
	import PageBg from '@/pages/components/page-bg/page-bg.vue';
	import loginApi from '@/api/login.js'

	export default {
		components:{
			PageBg
		},
		data() {
			return {
				password: '',
				confirmPassword: '',
			}
		},
		methods: {
		}
	}
</script>

<style lang="less" scoped>
	.top-head{
		margin: 70rpx 0 50rpx;
		text-align: center;
		color: #fff;
		font-size: 44rpx;
	}
	.form {
		width: 100%;
		padding: 0 82rpx;
	}

	.input-group {
		margin-top: 40rpx;
		position: relative;
		image{
			position: absolute;
			top: 50%;
			margin-top: -20rpx;
			left: 46rpx;
			width: 34rpx;
			height: 40rpx;
		}
		input{
			padding-left: 100rpx;
		}
	}

	.input, .login-btn {
		height: 108rpx;
		line-height: 108rpx;
		padding: 0 44rpx;
		border-radius: 54px;
		font-size: 32rpx;
		background-color: #fff;
		width: 100%;
	}
	.login-btn {
		margin-top: 48rpx;
		background-color: #409eff;
		width: 100%;
		font-size: 36rpx;
		color: #fff;
	}
</style>